<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伯乐智能HR - 岗位选择</title>
    
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom Styles -->
    <link rel="stylesheet" href="/styles/job_selection.css">
</head>
<body>
    <div id="app">
        <!-- 主容器 -->
        <div class="job-selection-workspace">
            <!-- 顶部导航栏 -->
            <header class="header">
                <div class="header-left">
                    <h1 class="title">
                        <i class="fas fa-briefcase brand-icon"></i>
                        伯乐智能HR
                        <span class="subtitle">岗位招聘管理</span>
                    </h1>
                </div>
                <div class="header-right">
                    <el-button-group>
                        <el-button size="small" @click="toggleTheme">
                            <i :class="isDark ? 'fas fa-sun' : 'fas fa-moon'"></i>
                        </el-button>
                        <el-button size="small" @click="refreshJobs" :loading="loading">
                            <i class="fas fa-sync-alt"></i>
                            刷新
                        </el-button>
                    </el-button-group>
                </div>
            </header>

            <!-- 主内容区域 -->
            <main class="main-content">
                <!-- 欢迎信息 -->
                <div class="welcome-section">
                    <div class="welcome-content">
                        <h2>🎯 选择招聘岗位</h2>
                        <p>请从下方岗位列表中选择一个岗位，开始智能候选人筛选和分析</p>
                    </div>
                    
                    <!-- 统计信息 -->
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-briefcase"></i>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ jobList.length }}</div>
                                <div class="stat-label">开放岗位</div>
                            </div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ totalCandidates }}</div>
                                <div class="stat-label">候选人库</div>
                            </div>
                        </div>
                        
                        <div class="stat-card">
                            <div class="stat-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ avgMatchRate }}%</div>
                                <div class="stat-label">平均匹配度</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 岗位筛选工具栏 -->
                <div class="filter-section">
                    <div class="filter-tools">
                        <el-input
                            v-model="searchQuery"
                            placeholder="搜索岗位标题、公司或技能..."
                            class="search-input"
                            clearable
                            @input="filterJobs">
                            <template #prefix>
                                <i class="fas fa-search"></i>
                            </template>
                        </el-input>
                        
                        <el-select
                            v-model="locationFilter"
                            placeholder="地点筛选"
                            clearable
                            @change="filterJobs">
                            <el-option label="全部地点" value=""></el-option>
                            <el-option 
                                v-for="location in uniqueLocations"
                                :key="location"
                                :label="location"
                                :value="location">
                            </el-option>
                        </el-select>
                        
                        <el-select
                            v-model="salaryFilter"
                            placeholder="薪资筛选"
                            clearable
                            @change="filterJobs">
                            <el-option label="全部薪资" value=""></el-option>
                            <el-option label="20万以下" value="low"></el-option>
                            <el-option label="20-30万" value="medium"></el-option>
                            <el-option label="30万以上" value="high"></el-option>
                        </el-select>
                        
                        <el-select
                            v-model="sortBy"
                            placeholder="排序方式"
                            @change="sortJobs">
                            <el-option label="按薪资排序" value="salary"></el-option>
                            <el-option label="按公司排序" value="company"></el-option>
                            <el-option label="按岗位名称" value="title"></el-option>
                        </el-select>
                    </div>
                </div>

                <!-- 岗位列表 -->
                <div class="jobs-section">
                    <div v-if="filteredJobs.length === 0 && !loading" class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3>暂无匹配岗位</h3>
                        <p>请调整筛选条件或刷新数据</p>
                        <el-button @click="resetFilters" type="primary">重置筛选条件</el-button>
                    </div>

                    <div v-else class="job-grid">
                        <div 
                            v-for="job in filteredJobs" 
                            :key="job.id"
                            class="job-card"
                            @click="selectJob(job)">
                            
                            <!-- 卡片头部 -->
                            <div class="card-header">
                                <div class="job-title">
                                    <h3>{{ job.title }}</h3>
                                    <span class="job-type">{{ job.schedule_type || 'Full-time' }}</span>
                                </div>
                                <div class="salary">
                                    <i class="fas fa-money-bill-wave"></i>
                                    <span>{{ formatSalary(job.salary_year_avg) }}</span>
                                </div>
                            </div>

                            <!-- 公司信息 -->
                            <div class="company-info">
                                <div class="company-name">
                                    <i class="fas fa-building"></i>
                                    <span>{{ job.company_name }}</span>
                                </div>
                                <div class="location">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>{{ job.location }}</span>
                                </div>
                            </div>

                            <!-- 技能要求 -->
                            <div class="skills-section">
                                <div class="skills-label">核心技能:</div>
                                <div class="skills-tags">
                                    <el-tag 
                                        v-for="skill in (job.required_skills || []).slice(0, 4)"
                                        :key="skill"
                                        size="small"
                                        type="primary"
                                        effect="plain">
                                        {{ skill }}
                                    </el-tag>
                                    <span v-if="(job.required_skills || []).length > 4" class="more-skills">
                                        +{{ (job.required_skills || []).length - 4 }}
                                    </span>
                                </div>
                            </div>

                            <!-- 经验要求 -->
                            <div class="requirements">
                                <div class="requirement-item">
                                    <i class="fas fa-clock"></i>
                                    <span>{{ job.min_experience_years || 0 }}+ 年经验</span>
                                </div>
                                <div v-if="job.work_from_home" class="requirement-item">
                                    <i class="fas fa-home"></i>
                                    <span>支持远程</span>
                                </div>
                            </div>

                            <!-- 岗位描述 -->
                            <div class="description">
                                <p>{{ (job.description || '').substring(0, 120) }}{{ (job.description || '').length > 120 ? '...' : '' }}</p>
                            </div>

                            <!-- 卡片底部操作 -->
                            <div class="card-footer">
                                <div class="candidate-stats">
                                    <i class="fas fa-users"></i>
                                    <span>匹配候选人: {{ job.candidateCount || '计算中...' }}</span>
                                </div>
                                <el-button type="primary" size="small">
                                    <i class="fas fa-arrow-right"></i>
                                    开始筛选
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>

        <!-- 加载遮罩 -->
        <div v-if="loading" class="loading-overlay">
            <div class="loading-content">
                <el-loading :visible="true" background="rgba(255, 255, 255, 0.8)">
                    <div class="loading-text">
                        <i class="fas fa-spinner fa-spin"></i>
                        正在加载岗位数据...
                    </div>
                </el-loading>
            </div>
        </div>
    </div>

    <!-- Vue.js 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Main Application -->
    <script src="/scripts/job_selection.js"></script>
</body>
</html>
















